<template>
    <div v-if="route.query.key">
        <h2>以下是包含<span style="text-decoration: underline;">{{ route.query.key }}</span>的帖子：</h2>
    </div>
    <div class="container">
        <div class="cardcontainer">
            <div class="card" v-for="item in post_list">
                <el-card>
                    <template #header>
                        <div class="card-header" @click="gouserhome(item.user.id)">
                            <el-avatar :src="baseURL + item.user.avatar" />
                            <span class="nickname">{{ item.user.nickname }}</span>
                        </div>
                    </template>
                    <div class="handle" @click="godetail(item.id)">
                        <div class="title">
                            <h3>{{ item.title }}</h3>
                        </div>
                        <div v-html="item.content" class="centent"></div>
                    </div>
                    <template #footer>
                        <div class="footer-content">
                            <span class="footer-item">
                                <el-icon><i class="el-icon-thumb"></i></el-icon>
                                {{ item.like_count }} 点赞
                            </span>
                            <span class="footer-item">
                                <el-icon><i class="el-icon-chat-line-round"></i></el-icon>
                                {{ item.comment_count }} 评论
                            </span>
                            <span class="footer-item">
                                <el-icon><i class="el-icon-star-on"></i></el-icon>
                                {{ item.favorite_count || 0 }} 收藏
                            </span>
                            <span class="footer-item">
                                <el-icon><i class="el-icon-time"></i></el-icon>
                                {{ item.created_at }}
                            </span>
                        </div>

                    </template>
                </el-card>
            </div>
        </div>
        <div class="paging">
            <el-pagination background layout="prev, pager, next" :total="num_list" @current-change="currentPage" />
        </div>
    </div>
</template>
<script setup>
import { getpostlist } from '@/apis/post';
import { ref, onMounted, watch } from 'vue';
import { baseURL } from '@/baseurl';
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router';

const post_list = ref([])
const route = useRoute()
const num_list = ref(0)
const router = useRouter()



async function currentPage(val) {
    console.log(val);
    try {
        // 加载帖子列表
        getpostlist({ key: route.query.key, category: route.query.category, data: val }).then(res => {
            console.log("帖子加载成功", res);
            post_list.value = res.data.results
            num_list.value = res.data.count
        })
        window.scrollTo(0, 0);          // 跳转到顶部
    } catch (error) {
        console.error("帖子加载失败", error);
    }
}

onMounted(() => {
    console.log("route params", route.params);
    console.log("route query", route.query);
    // 加载帖子列表
    getpostlist({ key: route.query.key, category: route.query.category, data: 1 }).then(res => {
        console.log("帖子加载成功", res);
        post_list.value = res.data.results
        num_list.value = res.data.count
    })
})

watch(() => route.query, (newVal, oldVal) => {
    // 刷新页面
    currentPage(1)
})

function gouserhome(id) {
    console.log(id);
    router.push('/userhome?id=' + id)
}


function godetail(id) {
    console.log(id);
    router.push('/post/' + id)
}

</script>
<style scoped>
.handle:hover {
    cursor: pointer;
}

.title {
    width: 90%;
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 内容超出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */
}

.centent {
    height: 200px;
    white-space: wrap;
    /* 不换行 */
    overflow: hidden;
    /* 内容超出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */
}

.card-header .nickname {
    margin-left: 10px;
    width: 100%;
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 内容超出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    /*  显示手型 */
    cursor: pointer;
}

.card {
    width: 40%;
    margin-left: 7%;
    margin-top: 40px;
}

.card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

.cardcontainer {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.paging {
    margin-top: 20px;
}
</style>